<template>
  <div>
    <!-- swiper -->
    <swiperRow></swiperRow>
<!-- 吸顶完成 -->
<van-sticky>
     <van-nav-bar title="影院" left-text="北京" v-if="showTop">
      <template #left>
        <p style="color: blue" @click="pushRouterCity">{{ cityGet }} </p>
        <van-icon name="arrow-down" />
      </template>
    </van-nav-bar>
</van-sticky>



    <van-tabs v-model="active" :sticky="value" offset-top="45px" >
      
      <!-- 两个组件下面 -->
      <van-tab title="正在热映">
       
          <nowPlaying></nowPlaying>

      
      
      </van-tab>
      <van-tab title="即将上映">
         <comingSoon></comingSoon>
      </van-tab>
      
    </van-tabs>
    <!-- 两个组件上面 -->
  </div>
</template>
<script>
import CityRequest from "../request-get/city-request.js";
export default {
  name:"films",
  data() {
    return {
      active: 0,
      value:false,
      scroll: '',
      showTop:false
    };
  },
  computed: {
    cityGet() {
      // 这个cityGet可以动态显示默认 或者你在vuex改过的值
      for (let item of this.$store.state.cityList) {
        if (this.$store.state.cityId == item.cityId) {
          return item.name;
        }
      }
    }

  },
  created() {
    let that = this;
    // 提前取得所有城市列表的数据 传入store
    CityRequest.then(function (res) {
      // console.log(res);
      that.$store.commit("getData", res);
    }); 
   

  },
  methods:{
      menu() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        // console.log(this.scroll);
        if(this.scroll>=150){
          this.showTop=true;
            this.value=true;
        }else if(this.scroll<150){
          this.showTop=false;
          this.value=false;
        }
      },
      pushRouterCity() {
      // 跳转到地点city界面 就完事了 数据已经存好了
      // console.log(this.$store.state.cityList);
      // console.log(this.$store.state.filmList); //无数据
      // console.log(this.$store.state.cinemaList); //无数据
      this.$router.push({
        path: "searchCityList",
      });
    },
  },
  mounted(){
     window.addEventListener('scroll', this.menu)
  }
};
</script>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}


.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  /* transform: translateX(100%) */
}
</style>